<template>
  <div class="show-list">
    <div class="show-list__wrapper__item">
      <button class="btn-preview" @click.prevent="downLoad(item)">
        <i class="s-icon el-icon-document" />
        <!-- <span style="color: #f56c6c">暂不支持预览<br />请下载查看</span> -->
      </button>
      <i class="s-remove el-icon-circle-close" @click.stop="removeFile()" />
      <div class="s-file-label">{{ item && item.name }}</div>
      <!-- <i class="s-download el-icon-download" @click="downLoad(item)" /> -->
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: File,
      default: () => ({}),
    },
  },

  data() {
    return {};
  },
  methods: {
    removeFile() {
      this.$emit("update:item", null);
    },
    downLoad(item) {
      const url = window.URL.createObjectURL(item);
      console.log(url);
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", item.name);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
  },
};
</script>

<style lang="scss" scoped>
.s-preview {
  z-index: 99;
}

.show-list {
  display: flex;
  flex-wrap: wrap;
  margin-right: -3px;

  &__wrapper {
    display: inline-flex;
    align-items: flex-end;

    &__count {
      font-weight: 500;
      span:nth-child(2) {
        margin-left: 10px;
      }
    }

    &__item {
      margin: 10px;
      width: 250px;
      height: 180px;
      display: inline-block;
      vertical-align: top;
      position: relative;
      z-index: 1;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      overflow: hidden;
      text-align: center;
      .tag {
        background: #409eff;
        width: 80px;
        position: absolute;
        left: -10px;
        top: 10px;
        line-height: 30px;
        color: #fff;
        border-radius: 30px;
      }
      .s-img,
      .s-pdf {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        height: 140px;
        width: 250px;
        margin: 0 auto;
        cursor: pointer;

        img {
          max-height: 100%;
          max-width: 100%;
        }
      }

      .s-progress {
        position: absolute;
        top: 0;
        left: 0;
        background: rgba($color: #bbb, $alpha: 0.75);
        width: 100%;
        height: 100%;
        overflow: auto;

        .s-circle .el-progress {
          position: absolute;
          left: 50%;
          top: 50%;
          margin-left: -63px;
          margin-top: -63px;

          .el-progress__text {
            color: #fff;
          }
        }

        .s-progress-item {
          margin: 5px;
          background-color: #fff;
          border-radius: 3px;
          overflow: hidden;
          padding: 5px;

          .s-progress-item-name {
            text-align: left;
            line-height: 1.5;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }

      ::v-deep .el-upload-dragger {
        width: 250px;
        height: 180px;
        border: none;
        background-color: #f3f3f3;
      }

      .s-file-check {
        position: absolute;
        left: 10px;
        top: 10px;
      }

      .s-download {
        position: absolute;
        right: 10px;
        bottom: 10px;
        cursor: pointer;
        font-size: 20px;
        font-weight: bold;

        &:hover {
          color: #304156;
        }
      }

      .s-remove {
        color: red;
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer;
        font-size: 20px;
        font-weight: bold;
        display: none;
      }

      &:hover .s-remove {
        display: block;
      }

      .s-file-label {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        line-height: 30px;
        padding: 5px 30px 5px 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        background-color: #fff;
        border-top: 1px solid #eee;
      }

      .s-icon {
        font-size: 57px;
        line-height: 150px;
      }

      .btn-preview {
        display: block;
        background: transparent;
        width: 100%;
        border: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        outline: none;
        height: calc(100% - 41px);

        .el-icon {
          font-size: 40px;
          margin-bottom: 8px;
          color: #666;
        }

        .s-icon {
          line-height: 1.5;
        }
      }
    }
  }
}
</style>
